<!DOCTYPE html>
<html>
<head>
	<title>plug-inline</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.inline.js"></script>
	<script type="text/javascript">
		//<![CDATA[
		$(document).ready(function(){
			
			$('.inline').inline();
			
		});
		//]]>
	</script>
</head>
<body>
	<div id="wrapper">
		<div class="inline">
			<div class="item">
				<span>editable 1</span>
			</div>
			<div class="item" id="item-[id_number]" title="[field_name]">
				<span>editable 2</span>
			</div>
			<div class="item" rel="textarea">
				<span>editable textarea 3</span>
			</div>
		</div><!-- .inline -->
		
		<div class="desc">
			<h2>default options</h2>
			<p>url: 'ajax.php'</p>
			<div class="small">you can change this value to your .php file to process ajax request, you can use query string also</div>
			<p>title: true</p>
			<div class="small">this is used to set up your database field name into 'title' attribute</div>
			<p>textarea: false</p>
			<div class="small">if you want to use <u>textarea</u> instead of <u>input type="text"</u></div>
			
			<h2>javascript</h2>
<xmp>
	$(document).ready(function(){

		$('.inline').inline({
			//options
		});

	});
</xmp>
			
			<h2>html</h2>
<xmp>
	<div class="inline">

		<div class="item" id="item-[id_number]" title="[field_name]">
			<span>current value</span>
		</div>

	</div>
</xmp>
			<p>div.inline</p>
			<div class="small">this is the parent container, there can be more than one record you can put inside via div.item</div>
			<p>div.item</p>
			<div class="small">fill "id" attribute with your record's unique_id . example: id="item-8"</div>
			<div class="small">fill "title" attribute with your field_name . example: title="product_name"</div>
			<div class="small">you can also enable textarea mode via "rel" attribute . example: rel="textarea"</div>
			<p>span</p>
			<div class="small">put your initial value inside span</div>
			
			<h2>AJAX file</h2>
			<p>$_POST['item-id']</p>
			<div class="small">get your unique number value</div>
			<p>$_POST['field']</p>
			<div class="small">get your field name</div>
			<p>$_POST['data']</p>
			<div class="small">get your new value</div>
			
			<h2>Compatibility</h2>
			<p>Chrome</p>
			<p>Firefox</p>
			<p>Safari</p>
			<p>IE <span class="small">You'll figure out some unwanted white space, I suggest that you dont use IE for this!</span></p>
			
			<h2>Buy me a beer</h2>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="68QC5854TSGU4">
<input type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110401-1/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110401-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

			<h2>Question ?</h2>
			<p class="small">mdennisa [at] gmail [dot] com</p>
		</div><!-- .desc -->
		
	</div><!-- #wrapper -->
</body>
</html>